<%--
  Created by IntelliJ IDEA.
  User: WS
  Date: 2020/6/25
  Time: 21:31
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <script type="text/javascript">
        $(function () {
            queryData(1, 10);
        });

        function queryData(curpage, pagesize) {
            if (curpage == null || curpage == '') {
                curpage = 1;
            }
            if (pagesize == null || pagesize == '') {
                pagesize = 10;
            }
            var orderBy = $("#orderBy").val();
            var nickname = $("#nickname").val();
            var name = $("#name").val();
            var cardtype = $("#cardtype").val();
            var cardno = $("#cardno").val();
            $.ajax({
                url: '${ctx}/queryCustomer',
                type: 'POST',
                data: {
                    curpage: curpage, pagesize: pagesize, orderBy: orderBy,
                    nickname: nickname, name: name, cardtype: cardtype, cardno: cardno
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    $("#pageHelper_ul").empty();
                    $("#databody").empty();
                    for (var i = 1; i <= (data.total / pagesize) + 1; i++) {
                        $("#pageHelper_ul").append("<li class='" + (i == curpage ? 'active' : '') + "'><a>" + i + "</a></li>");
                    }
                    for (var i = 0; i < data.list.length; i++) {
                        $("#databody").append("<tr>" +
                            "<td>" + data.list[i].name + "</td>" +
                            "<td>" + data.list[i].nickname + "</td>" +
                            "<td>" + data.list[i].sex + "</td>" +
                            "<td>" + data.list[i].birthday + "</td>" +
                            "<td>" + data.list[i].workUnit + "</td>" +
                            "<td>" + data.list[i].cardType + "</td>" +
                            "<td>" + data.list[i].cardNo + "</td>" +
                            "<td>" + data.list[i].tel + "</td>" +
                            "<td>" + data.list[i].address + "</td>" +
                            "<td colspan='2'><button onclick='updateData(" + data.list[i].id + ")'>修改</button>&nbsp;&nbsp;<button onclick='deleteData(" + data.list[i].id + ")'>删除</button></td>" +
                            "</tr>");
                    }
                    $("#orderBy").val(data.orderBy);
                }
            });
        }

        function updateData(id) {
            if (id == null || id == "") {
                alert("请选择修改的数据....");
                return;
            }
            window.location.href = '${ctx}/updateCustomer?id=' + id;
        }

        function addData() {
            window.location.href = '${ctx}/CustomerAdd.jsp';
        }

        function deleteData(id) {
            if (id == null || id == "") {
                alert("请选择删除的数据....");
                return;
            }
            $.ajax({
                url: '${ctx}/deleteCustomer',
                type: 'POST',
                data: {id: id},
                dataType: 'json',
                success: function (data) {
                    alert(data);
                    queryData();
                }
            });
        }
    </script>
</head>

<body>
<nav>
    <ul>
        <li><a href="index.jsp">用户管理</a></li>
        <li><a href="logs.jsp">日志查看</a></li>
        <li><a href="help.jsp">帮助</a></li>
        <li style="float: right;"><a href="/logoutServlet">×</a></li>
    </ul>
</nav>
<div id="container">
    <div>
        <form action="/queryCustomer" method="post">
            <h3 style="text-align: center;">查询界面</h3>
            <hr>
            名称:&nbsp;&nbsp;<input type="text" id="name">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            昵称:&nbsp;&nbsp;<input type="text" id="nickname">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            证件类型:&nbsp;&nbsp;<select id="cardtype">
            <option value="">-选择证件类型-</option>
            <option>身份证</option>
            <option>护照</option>
            <option>其他</option>
        </select>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            证件号码:&nbsp;&nbsp;<input type="text" id="cardno">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input type="button" id="buttonSubmit" onclick="queryData(1,10)" value="查询">
            <input type="button" id="buttonAdd" onclick="addData()" value="添加">
        </form>
    </div>
    <div>
        <table id="dataTable">
            <thead>
            <tr>
                <th>用户名</th>
                <th>昵称</th>
                <th>性别</th>
                <th>生日</th>
                <th>工作单位</th>
                <th>证件类型</th>
                <th>证件号码</th>
                <th>联系方式</th>
                <th>联系地址</th>
                <th colspan="2">操作</th>
            </tr>
            </thead>
            <tbody id="databody">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td colspan="2">
                    <button>修改</button>&nbsp;&nbsp;<button>删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="pageHelper">
            <span class="li-text">排序:</span>
            <select class="li" name="orderBy" id="orderBy">
                <option value="name">用户名</option>
                <option value="nickname">昵称</option>
            </select>
            <span class="li">&lt;</span>
            <ul id="pageHelper_ul">
                <li><a>2</a></li>
                <li><a>3</a></li>
                <li><a>4</a></li>
                <li><a>5</a></li>
            </ul>
            <span class="li">&gt;</span>
        </div>
    </div>
</div>
</body>
</html>
